
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-container :style="{'min-height': containerHeight + 'px'}">
            <el-container style="border-top: 1px solid rgb(88, 149, 194)">
                <transition name="el-zoom-in-top">
                    <el-aside>
                        <el-header>
                            <h4 style>模块</h4>
                        </el-header>
                        <el-table
                            ref="singleTable"
                            :data="tableData"
                            highlight-current-row
                            border
                            @current-change="handleCurrentChange"
                            max-height="1200px"
                            style="width: 100%"
                        >
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column property="name" label="权限名称" width="249"></el-table-column>
                        </el-table>
                    </el-aside>
                </transition>
                <div class="tree_show"></div>
                <el-main>
                    <el-header>
                        <h4>功能权限</h4>
                    </el-header>

                    <el-divider></el-divider>
                    <el-tree
                        :data="treeData"
                        :props="defaultProps"
                        show-checkbox
                        aria-disabled
                        default-expand-all
                    ></el-tree>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
export default {
    data() {
        return {
            containerHeight: '',
            pageTitle: '',
            tableData: [],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id'
            },
            currentRow: {}
        };
    },
    created() {
        this.getData();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    methods: {
        getData() {
            appMain
                .permissionFind({})
                .then(res => {
                    if (res.data.code === 20000) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 获取树的数据
        getTree() {
            appMain
                .permissionFindModules({ moduleId: this.currentRow.id })
                .then(res => {
                    if (res.data.code === 20000) {
                        this.treeData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        handleCurrentChange(val) {
            this.currentRow = val;
            this.getTree();
            console.log('handleCurrentChange', val);
        }
    }
};
</script>



<style lang="css" scoped>
.el-header {
    color: #fff;
    background-color: rgb(58, 149, 222);
    height: 35px !important;
    border-radius: 2px;
    text-align: left;
    font-size: 16px;
}

h4 {
    padding-top: 5px;
}

.el-aside {
    background-color: rgb(238, 241, 246);
}

.el-main {
    padding: 0px !important;
    background-color: rgb(238, 241, 246);
}

.tree_show {
    width: 3px;
    background-color: rgb(121, 183, 231);
}
</style>
